var app = {
    // 数据
    data: {
        search: "", // 搜索框的绑定值
        categories: [
            // 工具分类的数据
            {
                name: "常用工具",
                tools: [
                    {
                        name: "Calculator",
                        title: "计算器",
                    },
                    {
                        name: "QRCode",
                        title: "二维码生成器",
                    },
                    {
                        name: "Markdown",
                        title: "Markdown 编辑器",
                    },
                ],
            },
            {
                name: "文本工具",
                tools: [
                    {
                        name: "TextCase",
                        title: "文本大小写转换",
                    },
                    {
                        name: "TextDiff",
                        title: "文本差异对比",
                    },
                    {
                        name: "TextEncrypt",
                        title: "文本加密解密",
                    },
                ],
            },
            {
                name: "其他工具",
                tools: [
                    {
                        name: "ColorPicker",
                        title: "颜色选择器",
                    },
                    {
                        name: "ImageCompress",
                        title: "图片压缩",
                    },
                    {
                        name: "JsonFormat",
                        title: "JSON 格式化",
                    },
                ],
            },
        ],
    },

    // 方法
    methods: {
        // 更新匹配的工具列表
        updateMatchingTools() {
            var query = this.data.search.toLowerCase();
            for (var category of this.data.categories) {
                for (var tool of category.tools) {
                    if (tool.title.toLowerCase().includes(query)) {
                        return;
                    }
                }
            }
        },

        // 返回匹配的工具列表
        matchingTools(category) {
            var query = this.data.search.toLowerCase();
            if (!query) {
                return category.tools;
            }
            return category.tools.filter((tool) =>
                tool.title.toLowerCase().includes(query)
            );
        },

        // 渲染分类和工具列表
        renderCategories() {
            var categories = this.data.categories;
            var categoriesDiv = document.getElementById("categories");
            categoriesDiv.innerHTML = ""; // 清空原有内容
            for (var category of categories) {
                // 创建分类卡片
                var categoryCard = document.createElement("div");
                categoryCard.className = "col-12 col-md-4 col-lg-3";
                categoryCard.innerHTML = `
            <div class="card mt-md-5">
              <div class="card-header">${category.name}</div>
              <ul id="${category.name}" class="list-group list-group-flush">
                <!-- 这里将动态生成工具列表 -->
              </ul>
            </div>
          `;
                categoriesDiv.appendChild(categoryCard); // 添加到容器中

                // 创建工具列表
                var tools = this.matchingTools(category); // 获取匹配的工具
                var toolsList = document.getElementById(category.name); // 获取对应的列表元素
                for (var tool of tools) {
                    // 创建工具列表项
                    var toolItem = document.createElement("li");
                    toolItem.className = "list-group-item";
                    toolItem.innerHTML = `<a href="${tool.name}.html">${tool.title}</a>`;
                    toolsList.appendChild(toolItem); // 添加到列表中
                }
            }
        },
    }
}  